<template>
  <div class="stores-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>店铺管理</span>
        </div>
      </template>
      
      <el-table :data="storeList" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="店铺名称" width="200" />
        <el-table-column prop="merchantName" label="所属商家" width="150" />
        <el-table-column prop="address" label="地址" width="300" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '营业中' : '已关闭' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(false)
const storeList = ref([
  {
    id: 1,
    name: '麦当劳(王府井店)',
    merchantName: '麦当劳餐饮有限公司',
    address: '北京市东城区王府井大街138号',
    status: 'active',
    createTime: '2023-01-15 10:30:00'
  }
])

onMounted(() => {
  // 加载店铺数据
})
</script>

<style scoped>
.stores-page {
  padding: 0;
}
</style> 